'use client'
import { LJIcon } from "@/public/icon"
import { useState } from "react"
const {
    Star
} = LJIcon
// 评分组件
export default function Grade({
    defaultValue=1,
    limit=5,
    disabled=false,
    onChange
}){
    const [value,setValue] = useState(defaultValue)
    function changeValue(value){
        if(disabled){
            return ;
        }
        setValue(value+1)
        onChange && onChange(value+1)
    }
    return (    
        <div className="lj-grade flex">
            {[...Array(limit)].map((_,index)=>{
                return (
                    <span key={index} onClick={()=>changeValue(index+1)} className="mr-1 cursor-pointer">
                        {
                            index + 1 < value
                            ? <Star.Active width={32} height={32}></Star.Active>:
                            <Star.unActive width={32} height={32}></Star.unActive>
                        }
                    </span>
                )
            })}
        </div>
    )
}